<template>
    <div class="container">
        <system-nav name="账户管理">
            <template #addBtn>
                <p> 
                    <Button type="primary" @click="gotoRegister">注册</Button>
                </p>
            </template>
        </system-nav>
        <div class="inner">
            <div class="member-content">
                <div class="tool-bar">
                    <Form class="search-bar" ref="searchForm" :model="searchForm" :label-width="90" :inline="true">
                        <FormItem :label-width="0" v-show="showLevelSelect">
                            <Select v-model="searchForm.level" @on-change="handleSearch" placeholder="请选择组织级别">
                                <Option v-for="item in accountLevelList" :value="item.value" :key="item.value">
                                    {{ item.name }}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="用户名:">
                            <Input class="search-input" type="text" v-model.trim="searchForm.searchText" clearable
                                @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入用户名">
                            </Input>
                        </FormItem>
                        <FormItem :label-width="0">
                            <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                        </FormItem>
                    </Form>
                </div>
                <Table :columns="columns" :data="data">
                    <template slot-scope="{ row }" slot="level">
                       {{ row.level | formatLevel }}
                    </template>
                    <template slot-scope="{ row }" slot="superDeptName">
                        {{ row.superDeptName || '--' }}
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <div class="action-btns">
                            <Button type="text" size="small" @click="gotoDetail(row)">查看</Button>
                            <Button type="text" size="small" @click="gotoEdit(row)">编辑</Button>
                        </div>
                    </template>
                </Table>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="total" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts"
                            show-total show-elevator show-sizer
                            @on-change="changePage" @on-page-size-change="changePageSize">
                        </Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { getAccountListRest } from '@/common/apis/system'
import { accountLevelList } from '@/common/utils/const'

export default {
    name: 'account',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        return {
            showLevelSelect: false,
            accountLevelList,
            searchForm: {
                level: 0,
                searchText: ''
            },
            columns: [
                {
                    title: '用户名',
                    key: 'userName'
                },
                {
                    title: '组织级别',
                    key: 'level',
                    slot: 'level'
                },
                {
                    title: '党组织名称',
                    key: 'deptName'
                },
                {
                    title: '上级党组织',
                    key: 'superDeptName',
                    slot: 'superDeptName'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 125,
                    slot: 'action'
                }
            ],
            data: []
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        this.showLevelSelect = Number(this.userInfo.department.level) === 1
        this.initData()
    },
    methods: {
        initData() {
            const params = {
                pageNo: this.current,
                pageSize: this.pageSize
            }
            if (this.searchForm.level !== 0) {
                params.level = this.searchForm.level
            }
            if (this.searchForm.searchText) {
                params.userName = this.searchForm.searchText
            }
            getAccountListRest(params).then(result => {
                const data = result.data.content
                this.data = data.list || []
                this.total = data.total
            })
        },
        handleSearch() {
            this.current = 1
            this.initData()
        },
        gotoRegister() {
            this.$router.push('/account/register')
        },
        gotoDetail(record) {
            this.$router.push('/account/detail/' + record.userId)
        },
        gotoEdit(record) {
            this.$router.push('/account/edit/' + record.userId)
        }
    }
}
</script>
